/**
 * 原生实现的下线提示模态框组件
 */
class LogoutModal {
  constructor() {
    this.modal = null;
    this.isShowing = false;
    this.initStyles();
  }

  /**
   * 初始化样式
   */
  initStyles() {
    if (document.getElementById('logout-modal-styles')) return;

    const style = document.createElement('style');
    style.id = 'logout-modal-styles';
    style.textContent = `
      .logout-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        animation: fadeIn 0.3s ease-out;
      }

      .logout-modal-container {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
        border-radius: 16px;
        padding: 24px;
        width: 320px;
        max-width: 90vw;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.2);
        animation: slideUp 0.4s ease-out;
        position: relative;
        overflow: hidden;
      }

      .logout-modal-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #ff6b6b, #ffa726, #4ecdc4);
      }

      .logout-modal-icon {
        text-align: center;
        margin-bottom: 16px;
      }

      .logout-modal-icon svg {
        width: 64px;
        height: 64px;
        color: #ff6b6b;
      }

      .logout-modal-title {
        font-size: 20px;
        font-weight: 600;
        color: #1a202c;
        text-align: center;
        margin-bottom: 8px;
        line-height: 1.4;
      }

      .logout-modal-message {
        font-size: 14px;
        color: #718096;
        text-align: center;
        margin-bottom: 24px;
        line-height: 1.5;
      }

      .logout-modal-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .logout-modal-btn {
        padding: 12px 20px;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        text-align: center;
        text-decoration: none;
        display: block;
      }

      .logout-modal-btn-primary {
        background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
      }

      .logout-modal-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(78, 205, 196, 0.4);
      }

      .logout-modal-btn-secondary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
      }

      .logout-modal-btn-secondary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
      }

      .logout-modal-btn:active {
        transform: translateY(0);
      }

      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }

      @keyframes slideUp {
        from {
          opacity: 0;
          transform: translateY(30px) scale(0.95);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      /* 移动端适配 */
      @media (max-width: 480px) {
        .logout-modal-container {
          padding: 20px;
          margin: 16px;
          width: calc(100vw - 32px);
        }

        .logout-modal-title {
          font-size: 18px;
        }

        .logout-modal-message {
          font-size: 13px;
        }

        .logout-modal-btn {
          padding: 14px 20px;
          font-size: 15px;
        }
      }
    `;

    document.head.appendChild(style);
  }

  /**
   * 创建警告图标SVG
   */
  createWarningIcon() {
    return `
      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 9V14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        <path d="M12 17H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2"/>
      </svg>
    `;
  }

  /**
   * 显示下线提示
   */
  show(message, options = {}) {
    if (this.isShowing) return;

    const {
      onPasswordChange,
      onRelogin,
      autoRedirect = true,
      redirectDelay = 2000
    } = options;

    // 创建模态框元素
    this.modal = document.createElement('div');
    this.modal.className = 'logout-modal-overlay';
    
    this.modal.innerHTML = `
      <div class="logout-modal-container">
        <div class="logout-modal-icon">
          ${this.createWarningIcon()}
        </div>
        <h3 class="logout-modal-title">账号下线提醒</h3>
        <p class="logout-modal-message">${message}</p>
        <div class="logout-modal-buttons">
          <button class="logout-modal-btn logout-modal-btn-secondary" id="logout-change-password">
            修改密码
          </button>
          <button class="logout-modal-btn logout-modal-btn-primary" id="logout-relogin">
            重新登录
          </button>
        </div>
      </div>
    `;

    document.body.appendChild(this.modal);
    this.isShowing = true;

    // 添加事件监听器
    this.addEventListeners(onPasswordChange, onRelogin);

    // 自动跳转逻辑
    if (autoRedirect) {
      this.autoRedirectTimer = setTimeout(() => {
        this.hide();
        if (onRelogin) {
          onRelogin();
        } else {
          window.location.href = '/login';
        }
      }, redirectDelay);
    }
  }

  /**
   * 添加事件监听器
   */
  addEventListeners(onPasswordChange, onRelogin) {
    const changePasswordBtn = document.getElementById('logout-change-password');
    const reloginBtn = document.getElementById('logout-relogin');

    if (changePasswordBtn) {
      changePasswordBtn.addEventListener('click', () => {
        this.hide();
        if (onPasswordChange) {
          onPasswordChange();
        } else {
          // 默认跳转到密码修改页面
          window.location.href = '/change-password';
        }
      });
    }

    if (reloginBtn) {
      reloginBtn.addEventListener('click', () => {
        this.hide();
        if (onRelogin) {
          onRelogin();
        } else {
          window.location.href = '/login';
        }
      });
    }

    // 点击遮罩层关闭
    this.modal.addEventListener('click', (e) => {
      if (e.target === this.modal) {
        this.hide();
      }
    });
  }

  /**
   * 隐藏模态框
   */
  hide() {
    if (!this.isShowing || !this.modal) return;

    if (this.autoRedirectTimer) {
      clearTimeout(this.autoRedirectTimer);
    }

    this.modal.style.animation = 'fadeOut 0.3s ease-in';
    this.modal.querySelector('.logout-modal-container').style.animation = 'slideDown 0.3s ease-in';

    setTimeout(() => {
      if (this.modal && this.modal.parentNode) {
        this.modal.parentNode.removeChild(this.modal);
      }
      this.modal = null;
      this.isShowing = false;
    }, 300);
  }

  /**
   * 销毁实例
   */
  destroy() {
    this.hide();
    
    // 移除样式
    const styles = document.getElementById('logout-modal-styles');
    if (styles) {
      styles.parentNode.removeChild(styles);
    }
  }
}

// 创建全局实例
let logoutModalInstance = null;

/**
 * 获取或创建模态框实例
 */
export function getLogoutModal() {
  if (!logoutModalInstance) {
    logoutModalInstance = new LogoutModal();
  }
  return logoutModalInstance;
}

/**
 * 显示下线提示
 */
export function showLogoutModal(message, options = {}) {
  const modal = getLogoutModal();
  modal.show(message, options);
}

/**
 * 隐藏下线提示
 */
export function hideLogoutModal() {
  if (logoutModalInstance) {
    logoutModalInstance.hide();
  }
}

export default LogoutModal;
